<template>
	<view class="list_item da-center j-sb py-2 animated fadeInDown delay-4" @tap="newActiveItemTap(item.id)">
		
		
		<u-image width="205rpx" height="160rpx" lazy-load border-radius="4" :src="item.filePath||errLoadImg" mode="scaleToFill">
			<image :src="loadingImg" style="width: 205rpx;height: 160rpx;"  slot="loading"></image>
			<image :src="errLoadImg" style="width: 205rpx;height: 160rpx;" slot="error"></image>
		</u-image>

			
		<view class="flex-1  hb100 pl-2 d-flex flex-column">
			<text class="title">{{ item.activityTitle }}</text>
			<text class="second_title font text-light-muted mt" v-if="componentKey === 'dj'">活动时间：{{ item.activityTime | dateFormat }}</text>

			<view class="info d-flex j-sb mt-auto" v-if="componentKey === 'dj'">
				<view>
					报名：
					<text class="text-danger">{{ item.num }}</text>
					/{{ item.total }}
				</view>
				<view class="avtive_btn flex-center " v-if="item.delFlag" hover-class="bg-light-secondary" @tap="nowActive(item.delFlag, item.id)">立即报名</view>
				<view class="avtive_btn_esplre flex-center" v-else hover-class="bg-light-secondary" @tap="nowActive(item.delFlag, item.id)">活动已结束</view>
			</view>

			<view class="info d-flex j-sb mt-auto" v-else>
				<text>{{ item.activityTime | dateFormat('-','xxxx-xx-xx') }}</text>
				<text>阅读 {{ item.read || 0}} 收藏 {{ item.collect || 0}}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { dateFormat } from '@/filter/index.js';

export default {
	filters: {
		dateFormat
	},
	props: {
		item: {
			type: Object,
			default: () => {}
		},
		index: {
			type: Number,
			default: () => 0
		},
		componentKey: {
			type: String,
			default: () => ''
		}
	},
	data() {
		return {
			loadingImg:'/static/images/timg.gif',
			errLoadImg:'/static/images/errLoad.jpeg',
		};
	},
	computed: {
		...mapGetters(['token'])
	},
	methods: {
		newActiveItemTap(id){
			const data={
				id,
				key:this.componentKey
			}
			if(this.componentKey === 'dj') return  // 党建活动
			
			if(this.componentKey === 'yq') {  // 园区咨询
				console.log(id,'园区')
				
				uni.navigateTo({
					url:'/pages/newsInfo/newsInfo?data='+JSON.stringify(data)
				})
				return false
			}
			
		
			
			
			if(this.componentKey === 'sszz') {  // 时事政治
				console.log(id,'时事政治')
				uni.navigateTo({
					url:'/pages/newsInfo/newsInfo?data='+JSON.stringify(data)
				})
				return false
			}
			
			
		},
		nowActive(flag, id) {
			if (!this.token) {
				uni.showToast({
					title: '请登录！！！',
					icon: 'none',
					success: () => {
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});

				return false;
			}

			this.$emit('callBack', {
				function: 'newActive',
				data: { flag, id }
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.list_item {
	width: 100%;
	height: 208rpx;
	border-bottom: 2rpx solid #dedede;
	image {
		width: 205rpx;
		height: 160rpx;
	}

	.title {
		font-size: 32rpx;
		color: #333;
		letter-spacing: 2rpx;
		line-height: 1.2 !important;
		font-weight: 400;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}

	.info {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.avtive_btn {
		border: 2rpx solid #df3031;
		line-height: 1;
		padding: 5rpx 10rpx;
		border-radius: 6rpx;
		color: #df3031;
	}

	.avtive_btn_esplre {
		border: 2rpx solid #999;
		line-height: 1;
		padding: 5rpx 10rpx;
		border-radius: 6rpx;
		color: #999;
	}
}
</style>
